<template>
  <div class="page" v-if="!userInfo">
    <Empty image="search" description="请先登陆">
      <Button type="primary" to="/login">去登陆</Button>
    </Empty>
  </div>
  <div class="page" v-else>
    <div class="user-panel" @click="toPath('/userinfo/settings')">
      <div class="userinfo">
        <div class="avatar">
          <Image
            round
            width="4rem"
            height="4rem"
            :src="avatarVer(userInfo.avatar)"
          />
        </div>
        <div class="username">
          {{ userInfo.nickName }}
        </div>
      </div>
      <div class="right-icon">
        <Icon name="arrow" />
      </div>
    </div>
    <div class="data-panel">
      <div class="grid-item">
        <div class="num total-price">111</div>
        <div class="text">消费金额</div>
      </div>
      <div class="grid-item">
        <div class="num">111</div>
        <div class="text">订餐次数</div>
      </div>
      <div class="grid-item">
        <div class="num">0</div>
        <div class="text">优惠券</div>
      </div>
    </div>
    <div class="cell-list">
      <Cell path="/order" text="我的订单">
        <template #icon>
          <Icon name="label-o" />
        </template>
      </Cell>
      <Cell path="/localtion" text="我的评价">
        <template #icon>
          <Icon name="other-pay" />
        </template>
      </Cell>
      <Cell path="/localtion" text="我的收藏">
        <template #icon>
          <Icon name="medal-o" />
        </template>
      </Cell>
      <Cell path="/address/list?choose=false" text="地址管理">
        <template #icon>
          <Icon name="location-o" />
        </template>
      </Cell>
      <Cell path="/localtion" text="联系客服">
        <template #icon>
          <Icon name="service-o" />
        </template>
      </Cell>
      <Cell path="/localtion" text="意见反馈">
        <template #icon>
          <Icon name="records-o" />
        </template>
      </Cell>
    </div>
  </div>
</template>
<script lang="ts" setup>
import store from "@/store";
import { Icon, Image, Empty, Button } from "vant";
import Cell from "@/components/Cell.vue";
import { ref, inject } from "vue";
const avatarVer = inject("avatarVer");
const toPath = inject("toPath");
const userInfo: any = ref(store.state.userInfo);
</script>

<style lang="less" scoped>
.page {
  height: 100%;
}
.user-panel {
  padding: 20px 20px;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .userinfo {
    display: flex;
    align-items: center;
    justify-content: center;
    .avatar {
      margin-right: 10px;
    }
    .username {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }
}
.data-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  .grid-item {
    text-align: center;
    border-radius: 5px;
    background-color: #fff;
    padding: 0;
    .text {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
    .num {
      font-size: 18px;
      color: #333;
      font-weight: 600;
    }
  }
}
.cell-list {
  padding: 20px 20px 0 20px;
}
</style>
